<template>
  <view>
    <view class="info-container">
      <!-- 头像,编辑按钮 -->
      <view class="info-edit-container">
        <view class="avatar-view">
          <img
            :src="this.baseURL + userInfo.avatar"
            alt="avatar"
            class="avatar-img"
          />
        </view>
        <view class="edit-view">
          <button
            class="edit-btn"
            @click="followUser()"
            :style="follow_operate_style"
          >
            <uni-icons
              type="plusempty"
              size="14"
              color="#fff"
              v-show="!followed"
            ></uni-icons>
            {{ follow_operate_text }}
          </button>
          <button class="chat-icon">
            <uni-icons type="chat" size="20" color="#fff"></uni-icons>
            <text class="chat-text">私信</text>
          </button>
        </view>
      </view>
      <!-- 个人简介 -->
      <view class="info-view">
        <view class="info-name">
          {{ userInfo.username }}
        </view>
        <view class="info-dy">
          抖音号:
          <text class="info-dy-text">
            {{ userInfo.douyinId }}
          </text>
        </view>
        <view class="info-signature">
          {{ userInfo.signature }}
        </view>
        <!-- 获赞,关注,粉丝 -->
        <view class="info-count">
          <view>
            <text class="info-count-text">{{ userInfo.likerCountHuman }}</text>
            获赞
          </view>
          <view>
            <text class="info-count-text">
              {{ userInfo.followingCountHuman }}</text
            >
            关注
          </view>
          <view>
            <text class="info-count-text">
              {{ userInfo.followersCountHuman }}</text
            >
            粉丝
          </view>
        </view>
      </view>
      <!-- 作品列表 -->
      <view class="info-video">
        <!-- tabs 页签, 包含三个 tab, 每个页签下面有作品列表 -->
        <view class="tabs-container">
          <view
            ref="videoTab"
            :class="{ 'pane-active': paneActive[0] }"
            class="info-tabs-pane pane-no-border"
            @click="handleClick('video')"
          >
            作品
          </view>
          <view
            ref="dynamicTab"
            :class="{ 'pane-active': paneActive[1] }"
            class="info-tabs-pane tw-text-center"
            @click="handleClick('dynamic')"
          >
            动态
          </view>
          <view
            ref="likeTab"
            :class="{ 'pane-active': paneActive[2] }"
            class="info-tabs-pane tw-text-center"
            @click="handleClick('like')"
          >
            喜欢
          </view>
        </view>
        <view>
          <me-video
            :video-list="videoList"
            ref="videoPlayer"
            :videoType="videoType"
          ></me-video>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { videosData as defaultVideos } from "@/data-test/index-data";
  import { userInfosData as defaultUserInfos } from "@/data-test/userinfo-data";
  import MeVideo from "@/components/me/me-video.vue";
  import api from "@/API";
  export default {
    name: "MeInfo",
    components: {
      MeVideo,
    },
    props: {
      followed: {
        type: Boolean,
        default: false,
      },
      videoUserId: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        userInfo: {
          userId: "1",
          username: "是阿玲啊",
          avatar: "/static/person/1.jpg",
          signature: "你还没有填写个人简介,点击添加...",
          douyinId: "dy47e2k212",
          tag: ["摄影", "美食", "旅行"],
          followersCount: 24, //粉丝数
          followersCountHuman: "0", //粉丝数
          followingCount: 12, //关注数
          followingCountHuman: "0", //关注数
          likerCount: 0, //获赞数, 自己作品点赞数
          likerCountHuman: "0", //获赞数, 自己作品点赞数
          videoCount: 0, //作品数
          statusCount: 0, //状态数
          likeCount: 0, //喜欢数,给别人点赞的数目
        },
        inputVisible: false,
        inputValue: "",
        videoAllList: [],
        videoList: [],
        videoLen: 1,
        // 动态列表
        dynamicList: [],
        dynamicLen: 1,
        //喜欢的视频
        likeList: [],
        likeLen: 2,
        paneActive: [false, false, false],
        videoType: "video", //默认类型是作品
      };
    },
    computed: {
      follow_operate_text() {
        return this.followed ? "已关注" : "关注作者";
      },
      follow_operate_style() {
        return this.followed
          ? { backgroundColor: "#ffffff59" }
          : { backgroundColor: "#fe2c55" };
      },
    },
    methods: {
      followUser() {
        this.$emit("update:followed", !this.followed);
      },
      handleClick(name) {
        switch (name) {
          case "video":
            this.videoList = this.videoAllList.slice(0, 4);
            this.videoType = "video";
            this.paneActive = [true, false, false];
            break;
          case "dynamic":
            this.videoList = this.videoAllList.slice(1, 2);
            this.videoType = "dynamic";
            this.paneActive = [false, true, false];
            break;
          case "like":
            this.videoList = this.videoAllList.slice(
              2,
              this.videoAllList.length
            );
            this.videoType = "like";
            this.paneActive = [false, false, true];
            break;
          default:
            break;
        }
        this.$nextTick(() => {
          this.$refs[`videoPlayer`].stopAll();
        });
      },
      hideVideoCover() {},
      initVideo() {
        const sliceData = (videos, len) => {
          this.videoAllList = videos;
          return videos.slice(0, len);
        };
        api.video
          .getVideoList()
          .then((res) => {
            this.videoList = sliceData(res.data, 4);
          })
          .catch((err) => {
            if (!res.data && res.statusCode === 500) {
              this.videoList = sliceData(defaultVideos, 4);
            }
          });
        this.$nextTick(() => {
          this.hideVideoCover();
        });
      },
      loadUserInfo() {
        const resolveUserInfo = (userInfos) => {
          userInfos = userInfos.filter(
            (item) => item.userId === this.videoUserId
          );
          const userInfo = userInfos[0];
          this.userInfo = { ...this.userInfo, ...userInfo };
          this.userInfo.likerCountHuman = this.getHumanCount(
            this.userInfo.likerCount
          );
          this.userInfo.followersCountHuman = this.getHumanCount(
            this.userInfo.followersCount
          );
          this.userInfo.followingCountHuman = this.getHumanCount(
            this.userInfo.followingCount
          );
          this.cacheUserInfo();
        };
        api.user
          .getUserInfo()
          .then((res) => {
            resolveUserInfo(res.data);
          })
          .catch((err) => {
            if (!err.data && err.statusCode === 500) {
              resolveUserInfo(defaultUserInfos);
            }
          });
        // uni.request({
        //   url: "/static/userInfo.json",
        //   success: (res) => {
        //     let userInfos = [];
        //     if (!res.data && res.statusCode === 500) {
        //       userInfos = userInfosData;
        //     } else {
        //       userInfos = res.data;
        //     }
        //     userInfos = userInfos.filter(
        //       (item) => item.userId === this.videoUserId
        //     );
        //     const userInfo = userInfos[0];
        //     this.userInfo = { ...this.userInfo, ...userInfo };
        //     this.userInfo.likerCountHuman = this.getHumanCount(
        //       this.userInfo.likerCount
        //     );
        //     this.userInfo.followersCountHuman = this.getHumanCount(
        //       this.userInfo.followersCount
        //     );
        //     this.userInfo.followingCountHuman = this.getHumanCount(
        //       this.userInfo.followingCount
        //     );
        //     this.cacheUserInfo();
        //   },
        //   fail: (err) => {
        //     console.log(err);
        //     userInfos = userInfosData.filter(
        //       (item) => item.userId === this.videoUserId
        //     );
        //     const userInfo = userInfos[0];
        //     this.userInfo = { ...this.userInfo, ...userInfo };
        //     this.userInfo.likerCountHuman = this.getHumanCount(
        //       this.userInfo.likerCount
        //     );
        //     this.userInfo.followersCountHuman = this.getHumanCount(
        //       this.userInfo.followersCount
        //     );
        //     this.userInfo.followingCountHuman = this.getHumanCount(
        //       this.userInfo.followingCount
        //     );
        //     this.cacheUserInfo();
        //   },
        // });
      },
      getHumanCount(count) {
        let resCount = "";
        if (count > 10000) {
          resCount = count / 10000 + "w";
        } else {
          resCount = count.toLocaleString();
        }
        return resCount;
      },
      cacheUserInfo() {
        uni.setStorageSync("userInfo", this.userInfo);
      },
      activeInfoPaneFirst() {
        // #ifdef H5
        const infotTabPane =
          document.getElementsByClassName("info-tabs-pane")[0];
        if (!infotTabPane.classList.contains("active")) {
          infotTabPane.classList.add("pane-active");
        }
        // #endif
        // #ifdef MP-WEIXIN
        this.paneActive = [true, false, false];
        // #endif
      },
    },
    created() {
      this.initVideo();
      this.loadUserInfo();
    },
    mounted() {
      this.activeInfoPaneFirst();
    },
    watch: {},
  };
</script>

<style scoped>
  .info-container {
    background-color: #171827;
  }

  .info-edit-container {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
  }

  .avatar-view {
    padding-left: 20px;
    margin-top: -15px;
    z-index: 10;
  }

  .avatar-img {
    border-radius: 50%;
    padding-top: -10px;
    width: 70px;
    height: 70px;
  }

  .edit-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 0 8px 16px;
    gap: 5px;
    flex-shrink: 0;
  }

  .edit-btn {
    background-color: #242832;
    color: #fff;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    min-width: 150px;
  }

  .chat-icon {
    background-color: #ffffff59;
    color: #e6e6ecd4;
    height: 35px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    flex-shrink: 0;
  }
  .chat-text {
    padding: 2px 4px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .info-view {
    width: 100%;
    padding-left: 16px;
  }

  .info-name {
    height: 30px;
    padding-bottom: 10px;
    font-size: 24px;
    color: #e5e5e6d4;
  }

  .info-dy {
    font-size: 12px;
    color: #808080;
  }

  .info-dy-text {
    padding-left: 5px;
  }

  .info-signature {
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .info-tag {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    line-height: 20px;
  }

  /* 兼容小程序和H5的标签样式 */
  .info-tag-item {
    height: 20px;
    color: #d1d2e0;
    background-color: #242832;
    padding: 2px 8px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: #a5a6a9ed;
  }
  .tag-item {
    --el-color-info-light-9: #202121;
    --el-color-info-light-8: #2d2d2f;
    --el-color-base: #909399;
  }

  .button-new-tag {
    --el-button-bg-color: #2d2d2f;
    --el-button-text-color: #909399;
    --el-button-border-color: #2d2d2f;
    --el-button-hover-bg-color: #2d2d2f;
    --el-button-hover-text-color: #909399;
    --el-button-hover-border-color: #2d2d2f;
    background-color: #20212e;
    color: #d1d2e0;
    padding: 2px 8px;
    margin-left: 0;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
  }

  .new-tag-input {
    width: 80px;
    height: 100%;
    background-color: #20212e;
    color: #d1d2e0;
    padding: 2px 8px;
    font-size: 14px;
    border: 1px solid #434bbe;
  }

  .info-count {
    margin-top: 20px;
    height: 50px;
    display: flex;
    gap: 10px;
    font-size: 18px;
  }
  .info-count-text {
    color: #f2f2f3;
  }
  .info-btn {
    width: 90%;
    padding: 2px 16px;
    margin: 0 auto;
  }
  .btn-camera {
    height: 40px;
    line-height: 40px;
    background-color: #242832;
    color: #909399;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .camera-icon {
    margin-right: 5px;
  }
  .el-icon {
    vertical-align: middle;
    padding: 0 5px;
  }
  .text {
    vertical-align: middle;
  }
  .info-video {
    margin-top: 20px;
  }
  .info-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 0;
    background-color: #242832;
    color: #909399;
    font-size: 16px;
    border-bottom: 1px solid #2d2d2f;
    width: 100%;
    margin-bottom: 5px;
  }
  .info-tabs-pane {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 33.33%;
    border-left: 1px solid #5f5f5fd3;
  }
  .info-tabs-pane:hover {
    color: #47a2ff;
    /* border-bottom: 1px solid #47a2ff; */
  }
  .pane-no-border {
    border-left: none;
  }
  .pane-active {
    color: #47a2ff;
    border-bottom: 1px solid #47a2ff;
  }
  .info-tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
</style>
